<template>
  <div class="my_bgbox">
    <Header />
    <div class="zoon"></div>
    <div class="rdService">
      <img src="../../assets/img/banner_1.png" alt />
      <div class="rdService_item">
        <p class="title">法拍房市场优势</p>
        <p class="text">帮您省钱的不二选择</p>
        <div class="goodness">
          <div class="goodness_item goodness1">
            <img src="../../assets/img/jgd.png" alt />
            <p class="goodness_title">价格低</p>
            <p class="goodness_text">相当于市场价7折</p>
          </div>
          <div class="goodness_item goodness2">
            <img src="../../assets/img/zyg_2.png" alt />
            <p class="goodness_title">自由购</p>
            <p class="goodness_text">无需本地户籍及社保</p>
          </div>
          <div class="goodness_item goodness3">
            <img src="../../assets/img/ktz.png" alt />
            <p class="goodness_title">可投资</p>
            <p class="goodness_text">自由购低于市场价</p>
          </div>
          <div class="goodness_item goodness4">
            <img src="../../assets/img/cspt.png" alt />
            <p class="goodness_title">成熟配套</p>
            <p class="goodness_text">优越的地理条件</p>
          </div>
        </div>
      </div>
      <div class="rdService_item1">
        <p class="title">我们可以为您做什么</p>
        <p class="text">为您提供从选房到过户的高品质购房体验</p>
        <div class="team_box">
          <div class="team_text">
            <p>
              <img src="../../assets/img/spot.png" alt />
              确保房源信息完整性、尽调报告及时性、杜绝购房隐患
            </p>
            <p>
              <img src="../../assets/img/spot.png" alt />减少东奔西跑、看户型的时间浪费、科学把控交房时间
            </p>
            <p>
              <img src="../../assets/img/spot.png" alt />1+N团队服务、专业的人做专业的事、更省心
            </p>
            <p>
              <img src="../../assets/img/spot.png" alt />参拍、贷款、过户、交房一站式服务，省心、省时、省钱
            </p>
          </div>
          <div class="team_tt">
            <img src="../../assets/img/tt.png" alt />
          </div>
        </div>
      </div>
      <div class="rdService_item" v-if="purchList">
        <p class="title">自由购</p>
        <p class="text">不受限制，实现购房自由</p>
        <div class="team_box">
          <div class="tab">
            <div
              v-for="(item, index) in purchList"
              :key="index"
              class="tab_list"
              @click="onDetails(item.id)"
            >
              <div class="picture">
                <img :src="item.img[0]" alt v-if="item.img" />
                <img src="../../assets/img/demo.png" alt v-else />
                <p
                  class="soon"
                  :class="[
                  item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed'
                ]"
                >{{ item.sellStage }}</p>
                <!-- <img
                  :src="[
                  item.ynFollow != 1
                    ? require(`@/assets/img/wdgzb.png`)
                    : require(`@/assets/img/ygz.png`)
                ]"-->
                <!-- alt
                @click="Onfollow(item, index)"
                class="heart"
                />-->
                <!-- <div class="camera" v-if="item.startSaleTimeStr">
                  <p class="start">开拍时间</p>
                  <p class="hour">{{ item.startSaleTimeStr }}</p>
                </div>
                <div class="camera" v-else>
                  <p class="hour">开拍时间待定</p>
                </div>-->
                <p
                  class="time"
                  v-if="item.startSaleTimeStr "
                  style="left: 60px;"
                >开拍时间：{{ item.startSaleTimeStr }}</p>
                <p class="time" v-else style="left: 60px;">开拍时间暂定</p>
              </div>

              <div>
                <p class="address">{{ item.title }}</p>
                <p class="details">
                  {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅 ·
                  {{ item.coveredArea }}㎡ · {{ item.directionName }}
                </p>
                <p class="price">
                  市场价：
                  <span v-if=" item.marketSalePrice">{{ item.marketSalePrice }}</span>
                  <span v-else>--</span>万
                </p>
                <div class="startPrice">
                  <p class="start">
                    起拍价：
                    <span v-if="item.startSalePrice">{{ item.startSalePrice }}万</span>
                    <span v-else>--</span>
                  </p>
                  <img src="../../assets/img/zxzx.png" class="btn" alt @click="On53" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rdService_item" v-if="purchListTwo">
        <p class="title">刚需捡漏</p>
        <p class="text">省钱是常态</p>
        <div class="team_box">
          <div class="tab">
            <div
              v-for="(item, index) in purchListTwo"
              :key="index"
              class="tab_list"
              @click="onDetails(item.id)"
            >
              <div class="picture">
                <img :src="item.img[0]" alt v-if="item.img" />
                <img src="../../assets/img/demo.png" alt v-else />
                <p
                  class="soon"
                  :class="[
                  item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed'
                ]"
                >{{ item.sellStage }}</p>
                <!-- <img
                  :src="[
                  item.ynFollow != 1
                    ? require(`@/assets/img/wdgzb.png`)
                    : require(`@/assets/img/ygz.png`)
                ]"
                  alt
                  @click="Onfollow(item, index)"
                  class="heart"
                />-->
                <p
                  class="time"
                  v-if="item.startSaleTimeStr "
                  style="left: 60px;"
                >开拍时间：{{ item.startSaleTimeStr }}</p>
                <p class="time" v-else style="left: 60px;">开拍时间暂定</p>
                <!-- <div class="camera" v-if="item.startSaleTimeStr">
                  <p class="start">开拍时间</p>
                  <p class="hour">{{ item.startSaleTimeStr }}</p>
                </div>
                <div class="camera" v-else>
                  <p class="hour">开拍时间待定</p>
                </div>-->
              </div>

              <div>
                <p class="address">{{ item.title }}</p>
                <p class="details">
                  {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅 ·
                  {{ item.coveredArea }}㎡ · {{ item.directionName }}
                </p>
                <p class="price">
                  市场价：
                  <span v-if=" item.marketSalePrice">{{ item.marketSalePrice }}</span>
                  <span v-else>--</span>万
                </p>
                <div class="startPrice">
                  <p class="start">
                    起拍价：
                    <span v-if="item.startSalePrice">{{ item.startSalePrice }}万</span>
                    <span v-else>--</span>
                  </p>
                  <img src="../../assets/img/zxzx.png" class="btn" alt @click="On53" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rdService_item2">
        <p class="title">专家帮选 6 大服务内容</p>
        <p class="text">不推销，全面解读，从您的需求出发</p>
        <!-- <img src="../../assets/img/btx.png" alt="" /> -->
        <div class="service">
          <img src="../../assets/img/ljyy.png" alt />
          <div class="service_text">
            <p class="textOne">政策解读</p>
            <p class="textTwo">楼盘分析</p>
            <p class="textThree">楼盘背调</p>
            <p class="textFour">房源匹配</p>
            <p class="textFive">楼盘对比</p>
            <p class="textSix">拍卖过户</p>
          </div>
        </div>
        <!-- <p class="order_btn">立即预约</p> -->
      </div>
      <div class="rdService_item rdService_img">
        <p class="title">瑞鼎法拍9大服务保障</p>
        <p class="text">大机构，保证您的购房无需承担任何风险</p>
        <div class="system_rd">
          <!-- <div class="name">
            <p>瑞鼎</p>
          </div>-->
          <div class="system_list">
            <div class="list_item item1">
              <p>真实房源</p>公示房源信息及时、真实
            </div>
            <div class="list_item item2">
              <p>产权明确</p>专业律师做房产背景尽调
            </div>
            <div class="list_item item3">
              <p>房产清晰</p>每套房均有专人现场实勘
            </div>
            <div class="list_item item4">
              <p>资金安全</p>担保客户所有款项资金安全
            </div>
            <div class="list_item item5">
              <p>服务透明</p>竞买未成，不收任何费用
            </div>
            <div class="list_item item6">
              <p>安心入住</p>保证购房后两年无任何干扰
            </div>
            <div class="list_item item7">
              <p>房屋交付</p>房屋最终不能交付，全额赔付
            </div>
            <div class="list_item item8">
              <p>产权过户</p>手续齐全三个月产权过户
            </div>
            <div class="list_item item9">
              <p>税费精算</p>购房税费核算、精准可控
            </div>
          </div>
        </div>
      </div>
      <div class="rdService_item1 rdService_img">
        <p class="title">瑞鼎法拍经理</p>
        <p class="text">高素质、严要求、更专业</p>
        <!-- <img src="../../assets/img/btx.png" alt="" /> -->
        <div class="broker_tema">
          <p class="brokerMen1">廖 经 理</p>
          <p class="brokerMen2">张 经 理</p>
          <p class="brokerMen3">陈 经 理</p>
          <p class="brokerMen4">刘 经 理</p>
          <p class="brokerMen5">林 经 理</p>
          <p class="brokerMen6">韦 经 理</p>
          <p class="brokerMen7">申 经 理</p>
          <p class="brokerMen8">宋 经 理</p>
          <p class="brokerMen9">张 经 理</p>
          <p class="brokerMen10">杨 经 理</p>
          <!-- <img src="../../assets/img/broker_tema.png" alt /> -->
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/pc_file/header.vue";
import Footer from "@/components/pc_file/footer.vue";
export default {
  data() {
    return {
      purchList: [],
      purchListTwo: []
    };
  },
  mounted() {
    this.OnFreedomBuy();
    this.OnCheapbyHouse();
  },
  methods: {
    onDetails(item) {
      this.$router.push({ name: "Details", query: { id: item } });
    },
    On53() {
      window.open(
        "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1",
        "_blank"
      );
      this.stopBubbling(event);
    },
    Onfollow(val, idx) {
      this.stopBubbling(event);
      if (val.ynFollow == 0) {
        this.$message({
          message: "请先登录",
          type: "warning"
        });
      } else if (val == 1) {
        this.instance
          .cancelHouseFollow({
            id: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.OnFreedomBuy();
              this.OnCheapbyHouse();
            }
          })
          .catch(function(error) {});
      } else {
        this.instance
          .addHouseFollow({
            houseId: val.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.OnFreedomBuy();
              this.OnCheapbyHouse();
            }
          })
          .catch(function(error) {});
      }
    },
    OnFreedomBuy() {
      this.instance
        .FreedomBuy({
          page: 1,
          limit: 3
        })
        .then(res => {
          console.log(res);
          this.purchList = res.data.data;
          this.purchList.forEach(item => {
            if (item.imgUrl) {
              item.img = item.imgUrl.split(",");
            }
          });
        })
        .catch(function(error) {});
    },
    OnCheapbyHouse() {
      this.instance
        .CheapbyHouse({
          page: 1,
          limit: 3,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.purchListTwo = res.data.data;
          this.purchListTwo.forEach(item => {
            item.img = item.imgUrl.split(",");
          });
        })
        .catch(function(error) {});
    }
  },
  components: {
    Header,
    Footer
  }
};
</script>
<style lang="less" scoped>
.zoon {
  height: 80px;
}
.rdService {
  .title {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    color: #333333;
  }
  .text {
    text-align: center;
    font-size: 20px;
    color: #999999;
    margin-bottom: 45px;
  }
  .rdService_img {
    text-align: center;
  }
  .rdService_item {
    margin: 60px 0;
    .system_rd {
      position: relative;
      width: 1200px;
      height: 500px;
      margin: 0 auto;
      background: url("~@/assets/img/9dbz.png") center center no-repeat;
      .system_list {
        position: relative;
        .list_item {
          text-align: right;
          position: absolute;
          font-size: 16px;
          color: #666666;
          p {
            font-size: 20px;
            color: #333333;
          }
        }
        .item1 {
          top: 20px;
          left: 310px;
        }
        .item2 {
          left: 240px;
          top: 150px;
        }
        .item3 {
          top: 280px;
          left: 170px;
        }
        .item4 {
          top: 360px;
          left: 260px;
        }
        .item5 {
          top: 490px;
          left: 525px;
          text-align: center;
        }
        .item6 {
          top: 355px;
          left: 760px;

          text-align: left;
        }
        .item7 {
          top: 280px;
          right: 140px;
          text-align: left;
        }
        .item8 {
          top: 160px;
          right: 230px;
          text-align: left;
        }
        .item9 {
          right: 290px;
          top: 20px;
          text-align: left;
        }
      }
    }

    .goodness {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;
      .goodness1 {
        border-top: 4px solid #f5643e;
      }
      .goodness2 {
        border-top: 4px solid #008afb;
      }
      .goodness3 {
        border-top: 4px solid #e21e2d;
      }
      .goodness4 {
        border-top: 4px solid #ffc954;
      }
      .goodness_item {
        width: 23%;
        float: left;
        text-align: center;
        padding: 26px 0;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.07);
        border-radius: 10px;
        margin: 10px;

        .goodness_title {
          font-size: 20px;
          font-weight: bold;
          color: #333333;
          margin-top: 18px;
        }
        .goodness_text {
          font-size: 14px;
          color: #666666;
        }
      }
    }
    .team_box {
      width: 1200px;
      margin: 0 auto;
      .tab {
        padding: 40px 0;
        display: flex;
        .tab_detalis:last-child {
          margin-right: 0px;
        }
        .tab_list:last-child {
          margin-right: 0px;
        }
        .tab_list {
          cursor: pointer;
          width: 33.33%;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
          margin-right: 30px;
        }
        .tab_detalis {
          margin-right: 30px;
          width: 276px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
        }
        img {
          width: 100%;
          height: 214px;
          border-radius: 6px;
          position: relative;
        }
        .address {
          width: 350px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 34px 0 11px 0;
          font-weight: bold;
          color: #333;
        }
        .details {
          color: #656565;
        }
        .price {
          color: #656967;
          margin: 20px 0 19px 0;
        }
        .startPrice {
          overflow: hidden;
          .start {
            float: left;
            font-weight: bold;
            color: #333;
            margin: 0;
            span {
              color: #d91515;
            }
          }
          .btn {
            float: right;
            width: 20px;
            height: 20px;
          }
        }
      }
      .picture {
        position: relative;
        text-align: center;
        width: 100%;
        height: 214px;
        .heart {
          position: absolute;
          right: 20px;
          top: 20px;
          width: 20px;
          height: 20px;
        }
        .soon {
          position: absolute;
          top: 0;
          width: 89px;
          height: 31px;
          background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
          border-radius: 6px 0px 6px 0px;
          line-height: 31px;
          color: #fff;
          font-size: 14px;
        }

        .soonGreen {
          background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
        }
        .soonRed {
          background: #d91615;
        }
        .time {
          position: absolute;
          top: 200px;
          left: 25px;
          width: 226px;
          height: 33px;
          background: #ffffff;
          box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
          border-radius: 17px;
          font-size: 14px;
          line-height: 33px;
        }
        .camera {
          position: absolute;
          right: 15px;
          top: 160px;
          text-align: right;
          .start {
            font-size: 12px;
            color: #fff;
          }
          .hour {
            color: #fa6c5b;
            font-size: 16px;
          }
        }
      }
    }
  }
  .rdService_item1 {
    background: #f5f8fa;
    padding: 60px 0;
    .broker_tema {
      width: 1200px;
      height: 600px;
      margin: 0 auto;
      // background: url("~@/assets/img/broker_tema.png") no-repeat;
      // overflow: hidden;
      p {
        text-align: left;
        font-size: 20px;
        color: #ffffff;
        float: left;
        width: 16%;
        margin: 10px;
        height: 50%;
        line-height: 520px;
        padding-left: 20px;
      }
      .brokerMen1 {
        background: url("~@/assets/img/brokerMen1.png") bottom no-repeat;
        // background-size: 100% 100%;
      }
      .brokerMen2 {
        background: url("~@/assets/img/brokerMen2.png") bottom no-repeat;
      }
      .brokerMen3 {
        background: url("~@/assets/img/brokerMen3.png") bottom no-repeat;
      }
      .brokerMen4 {
        background: url("~@/assets/img/brokerMen4.png") bottom no-repeat;
      }
      .brokerMen5 {
        background: url("~@/assets/img/brokerMen5.png") bottom no-repeat;
      }
      .brokerMen6 {
        background: url("~@/assets/img/brokerMen6.png") bottom no-repeat;
      }
      .brokerMen7 {
        background: url("~@/assets/img/brokerMen7.png") bottom no-repeat;
      }
      .brokerMen8 {
        background: url("~@/assets/img/brokerMen8.png") bottom no-repeat;
      }
      .brokerMen9 {
        background: url("~@/assets/img/brokerMen9.png") bottom no-repeat;
      }
      .brokerMen10 {
        background: url("~@/assets/img/brokerMen10.png") bottom no-repeat;
      }
    }
    .team_box {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      padding: 58px 0 105px 0;
      .team_right {
        margin-left: 90px;
      }
      .team_text {
        margin: 0 160px 0 43px;
        font-size: 16px;
        color: #333333;
        line-height: 60px;
        text-align: left;
        img {
          margin-right: 20px;
        }
      }
      .team_tt {
        width: 537px;
        height: 278px;
      }
    }
  }
  .rdService_item2 {
    padding: 90px 0;
    text-align: center;
    background: url("~@/assets/img/6fwbg.png") no-repeat;
    background-size: 100% 100%;
    .service {
      width: 1200px;
      margin: 0 auto;
      position: relative;
      .service_text {
        font-size: 20px;
        color: #222222;
        .textOne {
          position: absolute;
          left: 60px;
        }
        .textTwo {
          position: absolute;
          left: 260px;
          top: 190px;
        }
        .textThree {
          position: absolute;
          left: 480px;
        }
        .textFour {
          position: absolute;
          right: 440px;
          top: 190px;
        }
        .textFive {
          position: absolute;
          right: 220px;
        }
        .textSix {
          position: absolute;
          right: 0px;
          top: 190px;
        }
      }
    }
    .order_btn {
      width: 212px;
      margin: 50px auto;
      height: 60px;
      background: #f58057;
      border-radius: 6px;
      text-align: center;
      line-height: 60px;
      font-size: 20px;
      color: #ffffff;
    }
  }
}
</style>
